<template>
    <div class="box1"  id="app" @click="as" style="padding: 20px;box-sizing: border-box;">
      
      <div class="box2">

        <div class="d1">
					<h4>
						教室管理
						<el-button type="text" @click="dialogFormVisible1">添加</el-button>
						<el-input type="text" @keyup.enter="search" style="width: 200px;margin-left: 20px;" v-model="name" placeholder="请输入搜索内容"/>
					</h4>
				</div>
        
        <div class="ss" v-show="ss" @click="yc">
      <ul>
        <li v-for="item in ssname" :key="item.ssname"  @click="clickli">{{item.name}}</li>
      </ul>

    </div>

      </div>

    <div class="box3">
     <el-table res="multipleTable"
     :data="tableData"
     >
       <!-- 列表名称 -->

      <el-table-column
      prop="name"
      label="教室名称"
      width="120"> 
    </el-table-column>


     <el-table-column label="操作">
     <template v-slot:default="scope">
   
    <el-button type="text" @click="removeUserById(scope.row.id)">删除</el-button>

     <el-button type="text" @click="dialogFormVisible2(scope.row)">修改</el-button>

     </template>
      </el-table-column>
     </el-table>
   </div>
<!-- 分页 -->
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="publicForm.page"
      :page-sizes="[1, 5, 10]"
      :page-size="publicForm.psize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="publicForm.counts">
 </el-pagination>

    </div>


 <el-dialog title="增加教室" width="60%"  v-model="dialogFormVisible" @close="addReset" >
 <el-form :model="form" :rules="resetFields1" ref="resetFields1" label-width="70px">
    <el-form-item label="教室名称:" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off" ></el-input>
    </el-form-item>
     <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </div>
  </el-form>

 
</el-dialog> 

 <el-dialog title="修改教室" width="60%"  v-model="dialogFormVisible3" @close="addReset" >
 <el-form :model="form" :rules="resetFields1" ref="resetFields1" label-width="70px">
    <el-form-item label="教室名称:" :label-width="formLabelWidth" prop="name">
      <el-input v-model="form.name" autocomplete="off" ></el-input>
    </el-form-item>
     <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </div>
  </el-form>

 
</el-dialog> 
</template>

<script>
  export default {
    data() {
      return {

      


       //分页
       publicForm:{
            counts:0,
            "psize": 5,
            "page": 1,
       },
        
         gridData: [],
        tableData: [],
         name:'',
        //  添加表单
           form:{
            name:"",
             },

          // 添加表单的验证规则对象

             resetFields1:{
               name:[{required:true,message:'请填写教室名称',trigger:'blur'},
                 { min: 2, max: 10, message: '长度在 1到 5 个字符',trigger:'blur'}
               ],
             },

           // 添加表单的验证规则对象
            //  弹框
      dialogFormVisible:false,
      dialogFormVisible3:false,
            //  弹框
     ssname:[],
      ss: false,
        dialog: false,
         formLabelWidth: '120px',
    
       ab:false,


    }
    },

    created(){
   
    this.getItemList()
   
    
    },

    methods: {

      // 修改

    


// 分页

 handleSizeChange(newSize){
   console.log(newSize)
   this.publicForm.psize=newSize
   this.getItemList()

  },

// 监听页码值改变的事件
handleCurrentChange(newPage){
  console.log(newPage)
  this.publicForm.page=newPage
   this.getItemList()



},



//添加
      dialogFormVisible1(){
           this.dialogFormVisible = true
          
      },

dialogFormVisible2(scope){
  this.dialogFormVisible3=true
  // console.log(11111)
  this.form.id = scope.id
   this.form.name = scope.name

   this.getItemList()
//  this.dialogFormVisible3=false

},
 

  // 重置
    addReset(){
  console.log(this.$refs.resetFields1.resetFields()) ;
    },

  // 点击按钮添加新课程

  async addUser(){
    let self =this
    this.$refs.resetFields1.validate( valid=>{
        // console.log(valid)
        if(!valid)return
    })

    // 发起添加用户的网络请求
    let token = window.sessionStorage.getItem('token')
    const {data:res} = await self.$http.post('http://www.eshareedu.cn/edusystems/api/classrooms/add',
    self.form);
   
   if(res.errCode == 10000){

        this.dialogFormVisible=false,
        this.dialogFormVisible3=false,
            this.getItemList()
                        
            this.$message.success('教室添加成功')
        }else{
            console.log('失败')
        }
        
  

  },


// 删除
async removeUserById(scope){
  let id =scope
 console.log(scope)
 let self =this
 //弹框询问
const re= await this.$confirm('此操作将永久删除此条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=> err)
         
          if(re == 'confirm'){
            let token = window.sessionStorage.getItem('token')
            const {data:ress}= await self.$http.get('http://www.eshareedu.cn/edusystems/api/classrooms/delete?id='+id)
            // console.log(ress)
          if(ress.errCode !=='10000'){
            
              this.$message.success('删除用户成功')
              this.getItemList()
              //  return this.$message.info('已取消删除')
              
            }else{

            return this.$message.error('删除用户失败！')
            
             
            }


          }
       
},

// 修改


   
    // 列表展示
   getItemList(){
    let token = window.sessionStorage.getItem('token')
    this.axios.get('http://www.eshareedu.cn/edusystems/api/classrooms/list',
    {params:this.publicForm}).then((res)=>{
      console.log(res)
      if(res.data.errCode == "10000"){
        console.log('请求课程成功')
        console.log(res.data.data.list)
        this.tableData=res.data.data.list 
        this.publicForm.counts = res.data.data.counts
      

      }
    })

 },  

  // 搜索

  search(){
  
  this.ss=true;
  console.log(this.name)
  var that=this;
  let token = window.sessionStorage.getItem('token')
    this.axios.get('http://www.eshareedu.cn/edusystems/api/courses/list?name='+this.name,
    {headers:{token}})
    .then(function(response){
      // console.log(response.data.data.list);
      console.log(that.tableData=response.data.data.list) 
      
    })
    .catch(function(err){

    })

 
 },


//   大盒子定义点击方式隐藏ul
   as: function () {
    this.ss=false
      },


  //  鼠标点击li
     clickli(){
    console.log(123)
    var that=this;
    let token = window.sessionStorage.getItem('token')
    this.axios.get('http://www.eshareedu.cn/edusystems/api/classes/list?name='+this.name,
    {headers:{token}})
    .then(function(response){
      console.log(that.ssname=response.data.data.list) 
      
    })
   console.log(this.tableData=that.ssname)
  //  console.log(this.) 
   

  },


    }



  }
</script>




